<template>
  <div class="mod-info">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="会员注册协议" name="0"></el-tab-pane>
      <el-tab-pane label="商家申请协议" name="1"></el-tab-pane>
      <el-tab-pane label="服务协议" name="2"></el-tab-pane>
      <el-tab-pane label="隐私协议" name="3"></el-tab-pane>
      <!-- <el-tab-pane label="申领规则" name="4"></el-tab-pane> -->
      <el-tab-pane label="关于我们" name="5"></el-tab-pane>
      <!-- <el-tab-pane label="身份认证须知" name="6"></el-tab-pane> -->
      <!-- <el-tab-pane label="贡献值转积分协议" name="7"></el-tab-pane> -->
      <el-tab-pane label="区域代理协议" name="8"></el-tab-pane>
      <el-tab-pane label="收益说明" name="9"></el-tab-pane>
      <el-tab-pane label="商家入驻协议" name="10"></el-tab-pane>
    </el-tabs>
    <div class="mt30">
      <div v-if="activeName == 0">
        <editor @getTxt="getTxt" :value="valueDetail" :height="'600'" :heightMultiple="1.2"></editor>
        <el-button type="primary" @click="dialogSkuChooseOne" class="topstyle">提 交</el-button>
      </div>
      <div v-if="activeName == 1">
        <editor @getTxt="getTxt1" :value="valueDetail1" :heightMultiple="1.2" :height="'600'"></editor>
        <el-button type="primary" @click="dialogSkuChooseTwo" class="topstyle">提 交</el-button>
      </div>
      <div v-if="
        activeName == 2 ||
        activeName == 3 ||
        activeName == 4 ||
        activeName == 5 ||
        activeName == 6 ||
        activeName == 7 ||
        activeName == 8 ||
        activeName == 9||
         activeName == 10
      " v-loading="formLoading">
        <editor @getTxt="getTxtA" :value="form.content" :heightMultiple="1.2" :height="'600'"></editor>
        <el-button type="primary" :loading="btnLoading" @click="submit" class="topstyle">提 交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import editor from '@/components/editor'
export default {
  components: {
    editor
  },
  data () {
    return {
      activeName: 0,
      valueDetail: '',
      valueDetail1: '',
      form: {},
      btnLoading: false,
      formLoading: false
    }
  },
  mounted () {
    this.getInfo()
  },
  methods: {
    // 编辑器
    getTxt (e) {
      this.user_protocol = e
    },
    // 编辑器
    getTxt1 (e) {
      this.shop_protocol = e
    },
    getTxtA (e) {
      this.form.content = e
    },
    handleClick (e) {
      this.activeName = e.name
      if (
        this.activeName == 2 ||
        this.activeName == 3 ||
        this.activeName == 4 ||
        this.activeName == 5 ||
        this.activeName == 6 ||
        this.activeName == 7 ||
        this.activeName == 8 ||
        this.activeName == 9 ||
        this.activeName == 10
      ) {
        this.getDetails()
      } else {
        this.getInfo()
      }
    },
    getInfo () {
      seviceApi.infoAggreementInfo().then(res => {
        if (res && res.data.code == 200) {
          if (res.data.data) {
            this.valueDetail = res.data.data.user_protocol
            this.valueDetail1 = res.data.data.shop_protocol
          }
        }
      })
    },
    // 会员注册协议
    dialogSkuChooseOne () {
      if (this.user_protocol) {
        let data = {
          user_protocol: this.user_protocol
        }
        seviceApi.setProtocol(data).then(res => {
          if (res && res.data.code == 200) {
            this.$message.success('提交成功')
          }
        })
      } else {
        this.$message.warning('填写会员注册协议')
      }
    },
    // 商家申请协议
    dialogSkuChooseTwo () {
      if (this.shop_protocol) {
        let data = {
          shop_protocol: this.shop_protocol
        }
        seviceApi.setshopProtocol(data).then(res => {
          if (res && res.data.code == 200) {
            this.$message.success('提交成功')
          }
        })
      } else {
        this.$message.warning('填写商家申请协议')
      }
    },
    // 详情 2,3,4,5,6
    getDetails () {
      this.formLoading = true
      this.form.mark_code =
        this.activeName == 2
          ? 'service-agreement'
          : this.activeName == 3
            ? 'privacy-agreement'
            : this.activeName == 4
              ? 'claiming-rules'
              : this.activeName == 5
                ? 'about-us'
                : this.activeName == 6
                  ? 'certification-instructions'
                  : this.activeName == 7
                    ? 'consumption-to-point'
                    : this.activeName == 8
                      ? 'area-agent'
                      : this.activeName == 9 ? 'income_statement' : this.activeName == 10 ? 'tenants-agreement' : ''
      console.log(this.form.mark_code)
      seviceApi.protocolConfigInfo(this.form.mark_code).then(res => {
        if (res && res.data.code == 200) {
          if (res.data.data) {
            this.form = res.data.data
          } else {
            this.form.content = ''
          }
        }
        this.formLoading = false
      })
    },
    // 修改 2,3,4,5
    submit () {
      this.btnLoading = true
      seviceApi.protocolConfigAddOrEdit(this.form).then(res => {
        this.btnLoading = false
        if (res && res.data.code == 200) {
          this.$message.success('修改成功！')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.ht36,
.el-input--mini .el-input__inner {
  height: 36px;
  line-height: 36px;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 10px 40px;
}

.topstyle {
  margin-top: 30px;
}
</style>
